<template>
  <div class="MyStock">
    <h1>股票查询</h1>
    <el-input v-model="temptscode" placeholder="输入你的股票代码" style="width:20%;height:auto;"></el-input>
    <br/>
    <el-button v-on:click="findStock">查询</el-button>
    <h1>你想要的股票信息如下</h1>
    <ol v-for="(stock, i) in stocks" :key="i">
      <li>股票代码:{{stock.tscode}}</li><br/>
      <li>交易日期:{{stock.tradedate}}</li><br/>
      <li>今开:{{stock.open}}</li><br/>
      <li>昨收:{{stock.close}}</li><br/>
      <li>最高价:{{stock.high}}</li><br/>
      <li>最低价:{{stock.low}}</li><br/>
      <li>交易额:{{stock.amount}}</li><br/>
      <li>交易量:{{stock.vol}}</li><br/>
    </ol>
  </div>
</template>

<script>
import axios from "axios"

export default {
  name: "MyStock",
  data() {
    return {
      stocks:[

      ],
      temptscode: "shit"
    }
  },
  methods: {
    findStock: function() {
      axios({ headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Accept': 'application/json'
        }, params: {"tscode": this.temptscode}, method:"get", url:"http://localhost:8081/stock/findStock/"})
          .then((response) => {
            alert("the data is" + JSON.stringify(response.data));//test
            this.stocks.push(response.data);
          } , (response) => {
            this.stocks.push({tscode:"000065", tradedate:"2022-05-22", high:"8.07", low:"7.99", open:"8.99", close:"7.93", vol:"126521", amount:"10103"})
            alert("no this stock!");
          });
    }
  }
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
